<template>
  <div class="bg">
    <div id="box_login">
      <el-form :model="user" label-width="0" class="login-container" ref="form">
        <h3 class="login_title">账号密码登录</h3>
        <el-form-item>
          <el-input placeholder="请输入工号" v-model="user.username" size="large">
            <template #prepend>账号:</template>
          </el-input>
        </el-form-item>
        <el-form-item style="height: 50px">
          <el-input type="password" show-password placeholder="请输入密码" v-model="user.password"
                    size="large">
            <template #prepend>密码:</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.code" style="width: 215px;" placeholder="请输入验证码" size="large">
            <template #prepend>验证码</template>
          </el-input>
          <div class="captcha-img"><img :src="codeImgUrl" alt="" @click="loadCaptcha" title="点我刷新验证码"
                                        class="code" style="margin-top: 10px"></div>
        </el-form-item>
        <!--                <el-form-item>-->
        <!--                    <el-checkbox name="remember-me" v-model="user['remember-me']" value="">记住我</el-checkbox>-->
        <!--                    记住我：<input name="remember-me" type="checkbox">-->
        <!--                </el-form-item>-->
        <el-form-item>
          <el-button type="primary" style="width: 100%; font-size: 18px" @click="doLogin"
                     v-loading="loading" element-loading-text="正在登录">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import './img/ThreeWebGL.js';
import './img/ThreeExtras.js';
import './img/Detector.js';
import './img/aaaa.js'


import WIconInput from  "../../components/formComps/WIconInput.vue"
import {ElMessage} from 'element-plus'
import {getCaptcha, login} from "../../network/login/login";
    export default {
        name: 'Log',
        data() {
            return {
                user:{
                    username: null,
                    password: null,
                    code: null,
                    "remember-me": true
                },
                codeImgUrl: '',
                loading: false
            };
        },
        components: {WIconInput},
        methods: {
            doLogin(){
                this.loading = true;
                login(this.user).then(vo=>{
                    this.loading = false;
                    this.$response.handle({
                        data:vo,
                        // success: '登录成功',
                        error: vo.msg,
                        successFn: ()=>{
                            let data = vo.data;
                            let user = data.empInfo;
                            localStorage.setItem('tokenStr',data.tokenHead + data.token);//保存token关键字段至本地
                            this.$store.commit('loginUserInfoSwitch');//清除上一个登录者的缓存信息
                            ElMessage.success(`登录成功，欢迎用户 '${user.empName} '进入系统！`)
                            this.$router.push('/home')
                        },
                        failFn: ()=>{
                            this.loadCaptcha();
                        },
                        log: '登录信息'
                    })
                })
            },
            loadCaptcha(){
                getCaptcha().then(resp=>{
                    this.codeImgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(resp).reduce((data, byte) => data + String.fromCharCode(byte), ''));
                })
            },
            init(){
                this.loadCaptcha();
            }
        },
        created() {
            this.init();
        },
    };
</script>


<style scoped>
    *{
        /*border: 1px solid red;*/
    }
    .bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      right: 0px;
      border: 0px;
      background: url(./src/assets/img/登录2.jpg) no-repeat;
      background-size: 100%;
    }

    .login-container {
      border-radius: 15px;
      background-clip: padding-box;
      position: absolute;
      width: 350px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 35px 35px 15px 35px;
      background: #fff;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
      opacity:0.95;
    }

    .login_title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }

    .login_remember {
      margin: 0px 0px 35px 0px;
      text-align: left;
    }

    .el-button--primary {
      background: linear-gradient(45deg, pink 20%, dodgerblue 100%);
      border: none;
    }

    .el-button--primary:hover {
      background: linear-gradient(135deg, dodgerblue 20%, pink 100%);
      border: none;
    }
</style>
